<template>
    <div>
        <div class="sex-bj">
        <router-link tag="span" :to="{name:'index'}" class="comm-index fr">进入首页</router-link>       
        <span class="sex-span text-align-c">欢迎来到，简单竞戈</span>
        <span class="sex-span2 text-align-c font-24 color-3">请选择您的性别，我们会为您更准确的推荐</span>
        <span class="nan text-align-c" @click="indexpath(1)">
            <img src="../../assets/image/icon_male.png" alt="">
            我是男生
        </span>
        <span class="nan text-align-c nv" @click="indexpath(2)">
            <img src="../../assets/image/icon_female.png" alt="">
            我是女生
        </span>
        <span class="nan text-align-c unknown" @click="indexpath(0)">
            <img id="sex-img" src="../../assets/image/icon_unknown.png" alt="">
            未知
        </span>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            userObj:{}
        }
    },
    created(){
        this.getUser()
    },
    methods:{
        getUser(){      //获取用户的个人信息 (0、未知，1、男，2、女，3、女改男，4、男改女，5、其他 )                                                    
            apiHttp.apiCenter.detail('',resp=>{              
                this.userobj = resp;                                                                                                                                                                               
            })                                                                                                     
        },
        indexpath(index){
            //保存用户信息 
            this.userObj.sex = index;          
            let params = this.userObj;          
            apiHttp.apiCenter.updateUser(params,resp=>{               
                if(resp.code==200){
                    //Toast("修改成功！");
                    this.$router.push({
                        name:'index'
                    })
                }else{
                    Toast(resp.message)
                }
            })          
        }
    }
}
</script>
<style scoped>
#sex-img{
    margin-right: 0.4rem;
}
.sex-bj{
    background: url(http://132.232.13.213/gaochen/img_bj.png) no-repeat top center;
    width: 100%;
    background-size: 100%;
    overflow: hidden;
}
.sex-span{
    margin-top: 14.5rem;
    display: block;
    color: #D9504E;
    font-size: .7rem;
}
.sex-span2{
    padding-top: 1rem;
    display: block;
}
.nan{
    background-color: #89BEFD;
    height: 1.4rem;
    color: #fff;
    display: block;
    line-height: 1.4rem;
    margin: 0 auto;
    width: 6rem;
    margin-top: 1rem;
    border-radius: 1rem;
}
.nan img{
    width: .5rem;
    margin-right: 0.3rem;
}
.nv{
    background-color: #FC8487;
    
}
.unknown{
    margin-top: 2.5rem;
    background-color: transparent;
    color:#999;
    border:.04rem solid rgba(221,221,221,1);
    border-radius:6rem;
}
.comm-index{
    width:1.2rem;
    height:1.2rem;
    padding: .2rem .2rem .26rem .2rem;
    background:rgba(217,80,78,1);
    border:1px solid rgba(255,255,255,1);
    border-radius:50%;
    display: inline-block;
    color: #fff;
    text-align: center;
    margin: .8rem .6rem 0 0;
    font-size: 0.46rem;
}
</style>
